<template>
  <view class="desktop-page">
    <!-- 顶部导航栏 -->
    <view class="top-header">
      <view class="header-title">桌面</view>
      <view class="header-actions">
        <view class="action-icon">⋯</view>
        <view class="action-icon">—</view>
        <view class="action-icon">⊚</view>
      </view>
    </view>

    <!-- 门店选择和预约规则 -->
    <view class="store-section">
      <view class="store-selector" @click="showActionSheet">
        <text class="store-text">{{ selectBranch }} ></text>
      </view>
      <view class="rules-button" @click="handleRules">
        <text>预约规则与牌桌礼仪</text>
      </view>
    </view>

    <!-- 主赛事桌区域 -->
    <view class="main-event-section">
      <view class="section-header">
        <view class="section-title">主赛事桌</view>
        <view class="update-time">更新时间 {{ updateTime }}</view>
        <view class="status-indicator">
          <view class="status-dot"></view>
          <text class="status-text">进行中</text>
        </view>
      </view>

      <!-- 游戏信息卡片 -->
      <view class="game-info-card">
        <view class="info-item">
          <view class="info-icon">💰</view>
          <view class="info-label">基础积分</view>
          <view class="info-value">20/40</view>
        </view>
        <view class="info-divider"></view>
        <view class="info-item">
          <view class="info-icon">👤</view>
          <view class="info-label">座位</view>
          <view class="info-value">8/9</view>
        </view>
      </view>

      <!-- 游戏桌 -->
      <view class="game-table">
        <view class="table-center">
          <view class="community-cards">
            <view class="card-slot" v-for="i in 5" :key="i"></view>
          </view>
          <view class="brand-logo">JUMANJI</view>
        </view>

        <!-- 动物头像装饰 -->
        <view class="animal-decorations">
          <view class="animal-left">🦈</view>
          <view class="animal-right">🐉</view>
        </view>

        <!-- 玩家座位 -->
        <view class="player-seats">
          <view
            class="player-slot"
            v-for="(player, index) in players"
            :key="index"
            :class="[
              `seat-${index + 1}`,
              player.status === 'empty' ? 'empty-seat' : 'occupied-seat',
              `status-${player.status}`,
            ]"
            @click="handleSeatClick(player, index)"
          >
            <view class="seat-avatar" v-if="player.status !== 'empty'">
              <image
                :src="player.avatar"
                mode="aspectFill"
                v-if="player.avatar"
              />
              <text v-else>{{ player.name.charAt(0) }}</text>
            </view>
            <view class="seat-icon" v-else>🪑</view>
            <view class="seat-info" v-if="player.status !== 'empty'">
              <text class="player-name">{{ player.name }}</text>
              <text class="player-status">{{
                getStatusText(player.status)
              }}</text>
            </view>
            <text class="empty-text" v-else>空座位</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 副赛事桌区域 -->
    <view class="side-event-section">
      <view class="section-header">
        <view class="section-title">副赛事桌</view>
        <view class="update-time">更新时间 {{ updateTime }}</view>
        <view class="status-indicator">
          <view class="status-dot"></view>
          <text class="status-text">进行中</text>
        </view>
        <view class="waiting-button" @click="handleWaiting">
          <text>候桌</text>
        </view>
      </view>

      <!-- 副赛事桌列表 -->
      <view class="side-tables">
        <view class="empty-tables">
          <text>暂无副赛事桌</text>
        </view>
      </view>
    </view>

    <!-- 门店选择弹窗 -->
    <t-action-sheet
      description="切换门店"
      :visible="isShow"
      :items="branches"
      :show-cancel="false"
      @close="onClose"
      @selected="onSelect"
    />
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";

const isShow = ref(false);
const selectBranch = ref("重庆店-尖牙tusk");
const updateTime = ref("08:32:02");

// 玩家数据
const players = ref([
  { name: "启望", status: "playing", avatar: "" },
  { name: "恩赐", status: "reserved", avatar: "" },
  { name: "", status: "empty", avatar: "" },
  { name: "...", status: "reserved", avatar: "" },
  { name: "gg", status: "playing", avatar: "" },
  { name: "...", status: "reserved", avatar: "" },
  { name: "遮天树", status: "reserved", avatar: "" },
  { name: "sir", status: "reserved", avatar: "" },
  { name: "啊叶", status: "reserved", avatar: "" },
]);

const branches = ref([
  { label: "重庆店-尖牙tusk", value: "重庆店-尖牙tusk" },
  { label: "北京店-尖牙tusk", value: "北京店-尖牙tusk" },
  { label: "上海店-尖牙tusk", value: "上海店-尖牙tusk" },
  { label: "成都店-尖牙tusk", value: "成都店-尖牙tusk" },
]);

const showActionSheet = () => {
  isShow.value = true;
};

const onClose = () => {
  isShow.value = false;
};

const onSelect = (e) => {
  selectBranch.value = e.detail.selected.label;
  isShow.value = false;
};

const handleRules = () => {
  uni.showToast({
    title: "预约规则与牌桌礼仪",
    icon: "none",
  });
};

const handleWaiting = () => {
  uni.showToast({
    title: "候桌功能",
    icon: "none",
  });
};

const handleSeatClick = (player, index) => {
  if (player.status === "empty") {
    uni.showToast({
      title: "选择座位",
      icon: "none",
    });
  } else {
    uni.showToast({
      title: `查看玩家 ${player.name}`,
      icon: "none",
    });
  }
};

const getStatusText = (status) => {
  const statusMap = {
    playing: "游戏中",
    reserved: "已预约",
    empty: "空座位",
  };
  return statusMap[status] || "";
};

// 更新时间
const updateTimeDisplay = () => {
  const now = new Date();
  const time = now.toTimeString().slice(0, 8);
  updateTime.value = time;
};

onMounted(() => {
  updateTimeDisplay();
  setInterval(updateTimeDisplay, 1000);
});
</script>

<style lang="scss">
.desktop-page {
  display: flex;
  flex-direction: column;
  width: 100vw;
  min-height: 100vh;
  background-color: #121212;
  padding-bottom: 120rpx;

  /* 顶部导航栏 */
  .top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 40rpx;
    background-color: #1a1a1a;

    .header-title {
      color: #ffffff;
      font-size: 36rpx;
      font-weight: 500;
    }

    .header-actions {
      display: flex;
      gap: 20rpx;

      .action-icon {
        color: #ffffff;
        font-size: 32rpx;
      }
    }
  }

  /* 门店选择区域 */
  .store-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 40rpx;
    background-color: #ffc300;

    .store-selector {
      .store-text {
        color: #121212;
        font-size: 32rpx;
        font-weight: 500;
      }
    }

    .rules-button {
      background-color: #2a2a2a;
      color: #ffffff;
      padding: 16rpx 24rpx;
      border-radius: 8rpx;
      font-size: 24rpx;
    }
  }

  /* 主赛事桌区域 */
  .main-event-section {
    padding: 40rpx;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;

      .section-title {
        color: #ffc300;
        font-size: 40rpx;
        font-weight: bold;
      }

      .update-time {
        color: #ffffff;
        font-size: 24rpx;
      }

      .status-indicator {
        display: flex;
        align-items: center;
        gap: 10rpx;

        .status-dot {
          width: 16rpx;
          height: 16rpx;
          background-color: #00ff00;
          border-radius: 50%;
        }

        .status-text {
          color: #ffffff;
          font-size: 24rpx;
        }
      }
    }

    /* 游戏信息卡片 */
    .game-info-card {
      display: flex;
      background-color: #2a2a2a;
      border-radius: 16rpx;
      padding: 30rpx;
      margin-bottom: 40rpx;

      .info-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;

        .info-icon {
          font-size: 40rpx;
          margin-bottom: 10rpx;
        }

        .info-label {
          color: #ffffff;
          font-size: 24rpx;
          margin-bottom: 10rpx;
        }

        .info-value {
          color: #ffc300;
          font-size: 36rpx;
          font-weight: bold;
        }
      }

      .info-divider {
        width: 2rpx;
        background-color: #444444;
        margin: 0 20rpx;
      }
    }

    /* 游戏桌 */
    .game-table {
      position: relative;
      width: 100%;
      height: 600rpx;
      background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
      border-radius: 20rpx;
      border: 4rpx solid #ffc300;
      overflow: hidden;

      .table-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;

        .community-cards {
          display: flex;
          gap: 10rpx;
          margin-bottom: 20rpx;

          .card-slot {
            width: 40rpx;
            height: 60rpx;
            background-color: #ffffff;
            border-radius: 8rpx;
            border: 2rpx solid #ffc300;
          }
        }

        .brand-logo {
          color: #ffffff;
          font-size: 48rpx;
          font-weight: bold;
          letter-spacing: 8rpx;
        }
      }

      .animal-decorations {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        display: flex;
        justify-content: space-between;
        pointer-events: none;

        .animal-left,
        .animal-right {
          font-size: 120rpx;
          opacity: 0.3;
        }
      }

      /* 玩家座位 */
      .player-seats {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        .player-slot {
          position: absolute;
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          cursor: pointer;

          &.empty-seat {
            border: 3rpx solid #666666;

            .empty-text {
              color: #ffffff;
              font-size: 20rpx;
            }
          }

          &.occupied-seat {
            &.status-playing {
              border: 3rpx solid #00ff00;
            }

            &.status-reserved {
              border: 3rpx solid #00ff00;
            }
          }

          .seat-avatar {
            width: 60rpx;
            height: 60rpx;
            border-radius: 50%;
            background-color: #444444;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8rpx;

            image {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }

            text {
              color: #ffffff;
              font-size: 24rpx;
              font-weight: bold;
            }
          }

          .seat-icon {
            font-size: 40rpx;
            margin-bottom: 8rpx;
          }

          .seat-info {
            display: flex;
            flex-direction: column;
            align-items: center;

            .player-name {
              color: #ffffff;
              font-size: 20rpx;
              margin-bottom: 4rpx;
            }

            .player-status {
              color: #ffffff;
              font-size: 16rpx;
            }
          }
        }

        /* 座位位置 */
        .seat-1 {
          top: 20rpx;
          right: 20rpx;
        }
        .seat-2 {
          top: 50%;
          right: 20rpx;
          transform: translateY(-50%);
        }
        .seat-3 {
          bottom: 20rpx;
          right: 20rpx;
        }
        .seat-4 {
          bottom: 20rpx;
          right: 50%;
          transform: translateX(50%);
        }
        .seat-5 {
          bottom: 20rpx;
          left: 20rpx;
        }
        .seat-6 {
          top: 50%;
          left: 20rpx;
          transform: translateY(-50%);
        }
        .seat-7 {
          top: 20rpx;
          left: 20rpx;
        }
        .seat-8 {
          top: 20rpx;
          left: 50%;
          transform: translateX(-50%);
        }
        .seat-9 {
          top: 20rpx;
          right: 50%;
          transform: translateX(50%);
        }
      }
    }
  }

  /* 副赛事桌区域 */
  .side-event-section {
    padding: 40rpx;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;

      .section-title {
        color: #ffc300;
        font-size: 32rpx;
        font-weight: bold;
      }

      .update-time {
        color: #ffffff;
        font-size: 24rpx;
      }

      .status-indicator {
        display: flex;
        align-items: center;
        gap: 10rpx;

        .status-dot {
          width: 16rpx;
          height: 16rpx;
          background-color: #00ff00;
          border-radius: 50%;
        }

        .status-text {
          color: #ffffff;
          font-size: 24rpx;
        }
      }

      .waiting-button {
        background-color: #ffc300;
        color: #121212;
        padding: 16rpx 32rpx;
        border-radius: 8rpx;
        font-size: 24rpx;
        font-weight: 500;
      }
    }

    .side-tables {
      .empty-tables {
        background-color: #2a2a2a;
        border-radius: 16rpx;
        padding: 60rpx;
        text-align: center;

        text {
          color: #666666;
          font-size: 28rpx;
        }
      }
    }
  }
}

/* TDesign组件样式覆盖 */
.t-button::after {
  border: none !important;
}

.t-action-sheet__description {
  --td-action-sheet-description-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  background-color: #6e4400;
}

.t-action-sheet__list {
  background-color: #3b3b3b;
}

.t-action-sheet__item {
  --td-action-sheet-item-color: #ffffff;
}
</style>
